<script setup>
import { ref, computed, watch, onMounted } from 'vue'


const props =defineProps({
  data: Object,
})

const propertyList = computed(() => Object.entries(props.data.baseInfo || {}))
</script>

<template>
    <div class="project-baseinfo">
        <div class="head">项目竣工验收信息</div>
        <div class="content">
            <div class="panel">
                <div class="panel-title">竣工验收信息</div>
                <el-scrollbar style="height: 790px;">
                    <div class="info-line" v-for="[key, value] in propertyList">
                        <span>{{ key }}</span>
                        <span>{{ value }}</span>
                    </div>
                </el-scrollbar>
            </div>
            <div class="panel">
                <div class="panel-title">竣工备案信息</div>
                <el-scrollbar style="height: 790px;">
                    <div class="info-line" v-for="[key, value] in propertyList">
                        <span>{{ key }}</span>
                        <span>{{ value }}</span>
                    </div>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.project-baseinfo {
    padding: 20px;
    box-sizing: border-box;
    .head {
        text-align: center;
        color: #fff;
        text-align: center;
        color: #fff;
        line-height: 40px;
        margin-bottom: 20px;
    }
    .content {
        display: flex;
        justify-content: space-between;
        height: 100%;
        gap: 20px;
        .panel {
            flex: 1;
            border: 1px solid;
            border-image: linear-gradient(to bottom, #064F9300, #064F93) 1;
            .panel-title {
                width: 180px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                color: #049BED;
                border: 1px solid #049BED;
            }
            .info-line {
                display: flex;
                align-items: center;
                line-height: 32px;
                margin-top: 16px;
                margin-bottom: 16px;
                color: #fff;
            }
        }
    }

}
</style>